<template>
    <div>
        <el-row>
            <el-col :span="17">
                <el-input
                        placeholder="输入关键字进行过滤"
                        v-model="filterText">
                </el-input>
            </el-col>
            <el-col :span="6" style="text-align: center">
                <slot name="handle">
                    <el-button slot="handle" type="primary">添加</el-button>
                </slot>
            </el-col>
        </el-row>
        <el-tree
                :show-checkbox="showCheckbox"
                node-key="id"
                class="filter-tree"
                :data="modelData"
                :props="defaultProps"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="nodeClick"
                @check-change="checkChange"
                ref="tree">
            <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="treeLeft">{{ node.label }}</span>
        <span class="treeRight" v-if="showHandle">
          <el-button
                  type="text"
                  size="mini"
                  @click="() => append(data)">
            添 加
          </el-button>
                <el-button
                        type="text"
                        size="mini"
                        @click="() => edit(data)">
            编 辑
          </el-button>
          <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)">
            删 除
          </el-button>
        </span>
      </span>
        </el-tree>
    </div>
</template>

<script>
    export default {
        name: "menu-tree",

        model: {
            prop: 'data',//指向props的参数名
            event: 'returnBack'//事件名称
        },
        props: {
            showNodeCheckbox: {
                type: Array
            },
            data: {
                type: Array
            },
            showCheckboxModel: {
                type: Boolean
            },
            showHandle: {
                type: Boolean
            }
        },
        data() {
            return {
                showNodeCheckboxModel:this.showNodeCheckbox,
                showCheckbox: this.showCheckboxModel,
                filterText: '',
                modelData: this.data,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };

        },
        watch: {
            showNodeCheckbox(n, o) {
                this.addNode(n);
            },
            data() {
                this.modelData = this.data
            },
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {
            addNode(data) {
                if (data) {
                    this.$refs.tree.setCheckedKeys(data)
                }
            },
            clearNode() {
                this.$refs.tree.setCheckedKeys([])
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            checkChange() {
                let data = {
                    checkedNodes: this.$refs.tree.getCheckedNodes(),
                    checkedKeys: this.$refs.tree.getCheckedKeys()
                }
                this.$emit("position-click", data)
            },
            nodeClick(data, n, x) {
                this.checkChange();
                this.$emit("node-click", data)
            },
            append(data) {
                this.$emit("append", data)
            },

            remove(node, data) {
                this.$emit("remove", node, data)
            },
            edit(data) {
                this.$emit("edit", data)
            }

        },

        mounted() {
            this.addNode(this.showNodeCheckboxModel);
        }
    };

</script>

<style scoped>
    .filter-tree {
    }

    .treeRight {
        margin-left: 20px;
    }

    .treeLeft {

    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
